<template>
    <div class="top">
        <div class="title">设备概况</div>
        <div id="top" style="width: 100%; height: 90%"></div>
        <div class="bottom">
            <div class="left">
                <div>
                    在线总数<span>{{ onlineOrOffline['online'].length || 0 }}</span>
                </div>
            </div>
            <div class="right">
                <div>
                    离线总数<span>{{ onlineOrOffline['offline'].length || 0 }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {mapActions, mapMutations, mapState} from 'vuex';
import {getEquipmentMap} from '@/utils/api';
export default {
    name: 'equipmentProfile',
    computed: {
        ...mapState('equipment', ['equipmentData']),
        onlineOrOffline() {
            if (this.equipmentData.length) {
                return this.equipmentData.reduce(
                    (pre, equipment) => {
                        // if (equipment.iot_node_status == "17") {
                        if (equipment.iot_node_status == 18 || equipment.iot_node_status == 17) {
                            console.log('equipment.iot_node_status11', equipment.iot_node_status);
                            pre.offline.push(equipment);
                        } else if (equipment.iot_node_status == 16 || equipment.iot_node_status == 1) {
                            console.log('equipment.iot_node_status', equipment.iot_node_status);
                            pre.online.push(equipment);
                        }
                        return pre;
                    },
                    {offline: [], online: []}
                );
            } else {
                return {offline: [], online: []};
            }
        },
        // eslint-disable-next-line vue/return-in-computed-property
        chartData() {
            if (this.equipmentData.length) {
                let arr = this.equipmentData.reduce(
                    (pre, equipment) => {
                        // if (equipment.iot_node_status == '17') {
                        if (equipment.iot_node_status != 16) {
                            pre.offline.push(equipment);
                        } else if (equipment.iot_node_status == 16) {
                            pre.online.push(equipment);
                        }
                        return pre;
                    },
                    {offline: [], online: []}
                );
                let offlineL = arr.offline.length;
                let onlineL = arr.online.length;
                if (!offlineL && !onlineL) {
                    return [
                        {
                            value: 2,
                            itemStyle: {
                                normal: {
                                    opacity: 0,
                                },
                            },
                        },
                    ];
                } else if (offlineL && onlineL) {
                    return [
                        {
                            value: ((onlineL / (offlineL + onlineL)) * 100).toFixed(2),
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                        {offset: 0, color: '#14A25E'},
                                        {offset: 1, color: '#1ED97A'},
                                    ]),
                                },
                            },
                        },
                        {
                            value: 2,
                            itemStyle: {
                                normal: {
                                    opacity: 0,
                                },
                            },
                        },
                        {
                            value: ((offlineL / (offlineL + onlineL)) * 100).toFixed(2),
                            // name: 'B'
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                        {offset: 0, color: '#86F7F8'},
                                        {offset: 1, color: '#0C6BAA'},
                                    ]),
                                },
                            },
                        },
                        {
                            value: 2,
                            itemStyle: {
                                normal: {
                                    opacity: 0,
                                },
                            },
                        },
                    ];
                } else if (!offlineL && onlineL) {
                    return [
                        {
                            value: 100,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                        {offset: 0, color: '#14A25E'},
                                        {offset: 1, color: '#1ED97A'},
                                    ]),
                                },
                            },
                        },
                    ];
                } else if (offlineL && !onlineL) {
                    return [
                        {
                            value: 100,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                        {offset: 0, color: '#86F7F8'},
                                        {offset: 1, color: '#0C6BAA'},
                                    ]),
                                },
                            },
                        },
                    ];
                }
            } else {
                return [];
            }
        },
    },
    data() {
        return {};
    },
    created() {
        //更新设备
        getEquipmentMap({
            scene_id: '',
            name: '',
            paged: 1,
            pageSize: 5000,
        }).then(res => {
            if (res.status == 2 && res.data && res.data.data) {
                this.updateEquipmentData(res.data.data);
                this.init();
            } else {
                this.updateEquipmentData([]);
            }
        });
    },
    mounted() {
        this.init();
    },
    methods: {
        ...mapMutations('equipment', ['updateEquipmentData']),
        init() {
            var myChart = echarts.init(document.getElementById('top'));
            myChart.setOption({
                tooltip: {},
                // color: ['#358172', '#2b8a79'],
                series: [
                    {
                        tooltip: {
                            show: false, // 关闭鼠标移上去后显示浮框信息
                            trigger: 'item',
                            confine: true,
                        },
                        hoverAnimation: false, // 取消掉环形图鼠标移上去时自动放大
                        type: 'pie',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside',
                                formatter: '{value|{c}%}',
                                rich: {
                                    value: {
                                        fontSize: 15,
                                        color: '#ffffff',
                                        fontWeight: 600,
                                    },
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        // data: [
                        //   {
                        //     value: this.chartData["online"]["percent"] || 0,
                        //     // value: 100,
                        //     // name: 'A',
                        //     itemStyle: {
                        //       normal: {
                        //         color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                        //           { offset: 0, color: "#14A25E" },
                        //           { offset: 1, color: "#1ED97A" },
                        //         ]),
                        //       },
                        //     },
                        //   },
                        //   {
                        //     value: 2,
                        //     itemStyle: {
                        //       normal: {
                        //         opacity: 0,
                        //       },
                        //     },
                        //   },
                        //   {
                        //     value: this.chartData["offline"]["percent"] || 0,
                        //     // name: 'B'
                        //     itemStyle: {
                        //       normal: {
                        //         color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                        //           { offset: 0, color: "#86F7F8" },
                        //           { offset: 1, color: "#0C6BAA" },
                        //         ]),
                        //       },
                        //     },
                        //   },
                        //   {
                        //     value: 2,
                        //     itemStyle: {
                        //       normal: {
                        //         opacity: 0,
                        //       },
                        //     },
                        //   },
                        // ],
                        data: this.chartData,
                        radius: ['40%', '70%'],
                    },
                ],
            });
        },
    },
};
</script>

<style scoped lang="scss">
.top {
    background-image: url('@/assets/img/right-top.png');
    background-size: 100% 100%;
    width: 100%;
    height: 40%;
    background-repeat: no-repeat;
    z-index: 1999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 8px;
    .title {
        font-weight: bold;
        font-size: 14px;
        color: #19ecff;
        line-height: 20px;
        text-align: center;
    }
    .bottom {
        height: 55px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left {
            background-image: url('@/assets/img/legend1.png');
            background-size: 100% 100%;
            width: 43%;
            height: 100%;
            background-repeat: no-repeat;
            z-index: 4999;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            div {
                font-size: 10px;
                color: #ffffff;
                font-size: 12px;
                span {
                    font-size: 14px;
                    padding-left: 6px;
                    background-image: -webkit-linear-gradient(90deg, #ffffff 0%, #b6ffa7 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
        .right {
            background-image: url('@/assets/img/legend2.png');
            background-size: 100% 100%;
            width: 43%;
            height: 100%;
            background-repeat: no-repeat;
            z-index: 4999;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            div {
                font-size: 10px;
                color: #ffffff;
                font-size: 12px;
                span {
                    font-size: 14px;
                    padding-left: 6px;
                    background-image: -webkit-linear-gradient(90deg, #ffffff 0%, #aadcff 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
        }
    }
}
</style>
